<template>
  <el-dialog
    :visible.sync="openPayerStatus"
    :close-on-click-modal="false"
    width="900px"
    append-to-body
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户账号" label-width="80px" prop="customerAccount">
            <el-input placeholder="请输入客户账号" v-model="form.customerAccount" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="客户名称" label-width="80px" prop="customerName">
            <el-input placeholder="请输入客户名称" v-model="form.customerName" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="350px">
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button @click.native.prevent="choose(scope.$index, tableData)" type="text" size="small">选择</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="customerAccount" label="客户账号" sortable width="210"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" sortable width="230"></el-table-column>
        <el-table-column prop="customerAddress" label="客户地址" sortable width="250"></el-table-column>
      </el-table>
      <div style="margin-top: 20px; margin-bottom: 50px">
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          ></el-pagination>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "snapsPayer",

  data() {
    return {
      currentPage4: 1, // 分页
      // 是否显示弹出层
      openPayerStatus: false,
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",

      form: {
        customerAccount: "",
        customerName: "",
      },

      tableData: [
        {
          customerAccount: "CNY2399071",
          customerName: "PJF1",
          customerAddress: "上海市长宁区虹桥路1380号1",
        },
        {
          customerAccount: "CNY2399072",
          customerName: "PJF2",
          customerAddress: "上海市长宁区虹桥路1380号2",
        },
        {
          customerAccount: "CNY2399073",
          customerName: "PJF3",
          customerAddress: "上海市长宁区虹桥路1380号3",
        },
        {
          customerAccount: "CNY2399074",
          customerName: "PJF4",
          customerAddress: "上海市长宁区虹桥路1380号4",
        },
        {
          customerAccount: "CNY2399075",
          customerName: "PJF5",
          customerAddress: "上海市长宁区虹桥路1380号5",
        },
        {
          customerAccount: "CNY2399076",
          customerName: "PJF6",
          customerAddress: "上海市长宁区虹桥路1380号6",
        },
      ],
    };
  },

  methods: {
    // 表单重置
    reset() {
      this.resetForm("addForm");
      this.$set(this, "form", {});
    },
    handleClose() {
      this.openPayerStatus = false;
    },

    show(fromFlag = "") {
      console.log("show");
      this.fromFlag = fromFlag;
      this.openPayerStatus = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 选择
    choose(index, rows) {
      this.$emit("choose", rows[index], this.fromFlag);
      this.openPayerStatus = false;
    },

    //重置
    reset() {
      console.log("重置");
      this.resetForm("form");
    },

    // 修改
    search(row) {
      console.log("修改");
    },
  },
};
</script>

<style>
.page {
  float: right;
}
</style>
